import React from 'react'
import { useState,useEffect } from "react"
import axios from 'axios'
import Appson from './appson'
import Appclass from './appclass'
import Appfn from './appfn'
const Style = { // css in js 
    marginLeft:"20px"
}
// 函数组件没有生命周期，useEffect可也模拟三个周期
function App() {
    let [name,setNmae] = useState("")
    let [arr, setArr] = useState([])
    let [activeINDEX,setActiveIndex] = useState(0)
    useEffect(()=>{ // useEffect的第二个参数为一个空数组的时候相当于类徐建的componetDidMountd
        axios.get("/list").then(res=>{
            console.log(res.data);
            setArr(res.data)
        })

    },[])
   let changeActiveIndex=(index)=>{
            console.log(index);
            setActiveIndex(index)
    }
let fn = (data)=>{
    console.log(data);
    setNmae(data)
}
    return (
        <div>
            {
            
                arr && arr.length ? arr.map((item,index)=>{
                    return <span onClick={(()=>changeActiveIndex(index))} style={Style} key={index} className={index===activeINDEX?"active":""}>{item.tit}</span>
                }):"暂无数据"
            }
            {
              arr && arr.length ? <div>{arr[activeINDEX].phy}</div> : "暂无数据"

            }
            <hr />
            <Appson aaa={122334} send1={"我也是父组件的数据"}></Appson>
            <hr />
            {/* react是单向数据流，子组件不能直接修改父组件的数据 */}
            <Appclass bbb={arr} fn={fn}></Appclass>
            <h1>{name}</h1>
            <Appfn></Appfn>
        </div>
    )
}

export default App